import React, {useState, useEffect } from 'react';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Layout, Breadcrumb, Space, Tag, Popconfirm, Modal, Button, message, Input, Select, Switch } from 'antd';
import { FooterNav } from '../../components/layout/Footer/index'
import { HeaderContent } from '../../components/layout/Header/index'
import SiderBarMenu from '../../components/layout/SiderBar/index'
import BasicTable from '../../components/BasicTable/index'
// note:测试事件总线
import { MyContext } from '../../utils/index'
import Child from '../Child/index'
//note:测试redux
import { store } from '../../redux/index'
// import 'antd/dist/antd.css';
import './index.scss'
const { confirm } = Modal;
const { Content } = Layout;
const columns = [
    {
        title: '名字',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a onClick={() => downFile(text)}>{text}</a>
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        render: (text) => <p>{text === '1' ? '北京' : '南京'}</p>
    },
    {
        title: '标签',
        key: 'tags',
        dataIndex: 'tags',
        render: (tags) => (
            <span>
                {tags.map((tag) => {
                    let color = tag.length > 5 ? 'geekblue' : 'green';
                    if (tag === 'loser') {
                        color = 'volcano';
                    }
                    return (
                        <Tag color={color} key={tag}>
                            {tag.toUpperCase()}
                        </Tag>
                    );
                })}
            </span>
        ),
    },
    {
        title: '输入框',
        dataIndex: 'input',
        render: () => <Input placeholder="Basic usage"></Input>

    },
    {
        title: '下拉框',
        dataIndex: 'select',
        render: () => (
            <Select
                defaultValue="lucy"
                style={{
                    width: 120,
                }}
                onChange={handleChange}
                options={[
                    {
                        value: 'jack',
                        label: 'Jack',
                    },
                    {
                        value: 'lucy',
                        label: 'Lucy',
                    },
                    {
                        value: 'Yiminghe',
                        label: 'yiminghe',
                    },
                    {
                        value: 'disabled',
                        label: 'Disabled',
                    },
                ]}
            />
        )
    },
    {
        title: 'Switch开关',
        dataIndex: 'switch',
        render: () => (
            <Switch defaultChecked onChange={onChange} />
        )
    },
    {
        title: 'Action',
        key: 'action',
        render: (record) => (
            <>
                <Button type="primary" size='small' ghost onClick={() => handleEdit(record)}>编辑</Button>
                <Button danger size='small' style={{ margin: '0px 5px' }} onClick={() => handleDelete(record)}>删除</Button>
            </>
        )
    },
];
const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: '1',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];
const handleDelete = (data) => {
    console.log(data)
    confirm({
        title: 'Do you Want to delete these items?',
        icon: <ExclamationCircleFilled />,
        content: 'Some descriptions',
        onOk() {
            message.success('删除成功')
        },
        onCancel() {
            message.info('已取消')
        },
    });
};
const handleChange = (value) => {
    console.log(`selected ${value}`);
};
const onChange = (checked) => {
    console.log(`switch to ${checked}`);
};
const handleEdit = (data) => {
    console.log(data)
}
const downFile = (data) => {
    console.log(data)
}
// 导入layOut组件
//自定义组件SiderDemo
// class SiderDemo extends React.Component {
//     constructor(props) {
//         super(props)
//         this.state = {
//             collapsed: false,
//             loading: false,
//             mode: 'inline',
//         };
//         this.getTable = this.getTable.bind(this)
//     }
//     toggle = () => {
//         this.setState({
//             collapsed: !this.state.collapsed,
//         });
//     };
//     getTable() {
//         this.setState({ loading: !this.state.loading })
//         setTimeout(() => {
//             this.setState({ loading: false })
//         }, 2000)
//     }
//     render() {
//         return (
//             <Layout>
//                 {/* 侧边栏菜单数据 */}
//                 <SiderBarMenu />
//                 <Layout>
//                     {/* 头部区域 */}
//                     <HeaderContent />
//                     {/* 中间主体区域 */}
//                     <Content style={{ margin: '0 16px' }}>
//                         {/* 导航栏部分 */}
//                         <Breadcrumb style={{ margin: '12px 0' }}>
//                             <Breadcrumb.Item>User</Breadcrumb.Item>
//                             <Breadcrumb.Item>Bill</Breadcrumb.Item>
//                         </Breadcrumb>
//                         {/* 内容区域 */}
//                         <div className='mainContent' >
//                             <BasicTable columns={columns} data={data} event={this.getTable} loading={this.state.loading} />
//                         </div>
//                     </Content>
//                     {/* 底部区域 */}
//                     <FooterNav />
//                 </Layout>
//             </Layout>
//         );
//     }
// }



const params = 'P传递给C'
//note:hook使用
function SiderDemo() {
    const [topState, setTopState] = useState('默认数据P')
    //note:下级改变上级数据方法
    function sendToP(val) {
        if (val) {
            setTopState(val)
        }
    }
    // note：改变redux数据
    const changeRedux = () => {
        store.dispatch({ type: 'first_send', params: '触发按钮改变redux的默认值' })
    }
    return (
        <>
            {/* <div>
                <h1>父子组件传值</h1>
                <div>
                    <p>父组件数据:{topState}</p>
                    <button>P改变C的数据</button>
                </div>
                <div>
                    <Child sendToP={sendToP} />
                </div>
            </div> */}
            <p>________________________________________________________________</p>
            <div>
                <h1>跨级组件传值</h1>
                <div>
                    <p>父组件数据:{topState}</p>
                    <button>P改变C的数据</button>
                </div>
                <div>
                    <MyContext.Provider value={{ params: topState, event: sendToP }}>
                        <Child />
                    </MyContext.Provider>
                </div>
            </div>
            <p>________________________________________________________________________</p>
            <div>
                <h1>redux使用</h1>
                <p>redux默认数据：{store.getState().params}</p>
                <button onClick={changeRedux}>改变redux数据</button>
            </div>
        </>
    )
}

//输出组件
export default SiderDemo;